<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body id="page-top">

	<div id="wrapper">
		<div id="content-wrapper">
			<div class="container-fluid">

				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">账户管理</a></li>
				</ol>

				<form class="form-inline" id="trainingSearchForm">
					<div class="input-group mb-2 mr-sm-2">
						<select name="condition[masterCode]" style="width: 200px"
							id="inputState" class="form-control">
							<option th:each="m:${schools}" th:text="${m.masterName}"
								th:value="${m.masterCode}"></option>
						</select>
					</div>
					<div class="input-group mb-2 mr-sm-2">
						<input type="text" class="form-control"
							name="condition[name|like]" placeholder="姓名">
					</div>
					<div class="input-group mb-2 mr-sm-2">
						<input type="text" class="form-control"
							name="condition[loginName|like]" placeholder="登陆名">
					</div>
					<button type="button" onclick="search(this)"
						class="btn btn-primary mb-2">搜索</button>
					&nbsp;&nbsp;
					<button type="button" onclick="add()" class="btn btn-primary mb-2">添加</button>
				</form>

				<div class="span12">
					<div class="table-responsive">
						<table class="table table-bordered" id="dataTable" width="100%"
							cellspacing="0">
							<thead>
								<tr>
									<th>姓名</th>
									<th>登陆名</th>
									<th width="200px">数据权限</th>
									<th width="200px">所属角色</th>
									<th width="200px">最后登陆时间</th>
									<th width="100px">操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							<footer>
								<tr>
									<th>姓名</th>
									<th>登陆名</th>
									<th width="200px">数据权限</th>
									<th width="200px">所属角色</th>
									<th width="200px">最后登陆时间</th>
									<th width="100px">操作</th>
								</tr>
							</footer>
						</table>
					</div>
				</div>

			</div>
		</div>
	</div>
	<script
		src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/jquery-easing/jquery.easing.min.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/datatables/jquery.dataTables.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/datatables/dataTables.bootstrap4.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		  $('#dataTable').DataTable({
			  serverSide: true ,
			  ordering: false , 
			  searching : false ,
              bLengthChange : false ,
              rowNum : 15 , 
              multiselect : true,
              ajax : {
                  "url": "/manager/account_list_data",
                  "dataType": "json" ,
                  "data": function (d) {
                      var searchParams = paramsBuilder() ;
                      if(searchParams){
                        $.extend(d,searchParams); 
                      }
                  }
              } ,
              columns: [
                  { data: 'name' },
                  { data: 'loginName' },
                  { data: 'masterCode_label' },
                  { data: 'rolePower' },
                  { data: 'lastLoginTime' },
                  { data: 'id' }  
              ] , 
              columnDefs: [ 
              {
                  "render": function(data, type, row) {
						var id = row.id ; 
		           		var html = "<a data-id='"+id+"' style='cursor:pointer' onclick='modify(this)'><i class='fa fa-edit'></i> 修改</a>" ; 
   		           		return html;
                  },
                  "targets": 5
              }],
              language : {
                  "sProcessing": "处理中...",
                  "sLengthMenu": "显示 _MENU_ 项结果",
                  "sZeroRecords": "没有匹配结果",
                  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                  "sInfoPostFix": "",
                  "sSearch": "搜索:",
                  "sUrl": "",
                  "sEmptyTable": "表中数据为空",
                  "sLoadingRecords": "载入中...",
                  "sInfoThousands": ",",
                  "oPaginate": {
                      "sFirst": "首页",
                      "sPrevious": "上页",
                      "sNext": "下页",
                      "sLast": "末页"
                  },
                  "oAria": {
                      "sSortAscending": ": 以升序排列此列",
                      "sSortDescending": ": 以降序排列此列"
                  }
             }

		  });
		});
		
		function add(btn){
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '添加',
				  area: ['60%', '60%'],
				  content: ['/manager/account_add', 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ 
				     console.log("close") ; 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		function modify(btn){
			var id = $(btn).attr("data-id") ;
			console.log("id = "+id) ; 
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '修改',
				  area: ['60%', '60%'],
				  content: ['/manager/account_modify/'+id, 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ //此处用于演示
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		
		//搜索
		function search(btn){
			// $('#dataTable').draw();
			$("#dataTable").dataTable().fnDraw(false);
		}
		
		
		/**
		 * get params
		 */
		function paramsBuilder() {
		    var param = {} ;
		    $('#trainingSortPanel input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    var i = $('#trainingSearchForm input') ; 
		    console.log("i = " + i) ; 
		    $('#trainingSearchForm input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    $('#trainingSearchForm select').each(function() {
		        console.log('value = ' + this.value + ' , value = ' + $(this).val());
		        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
		            param[this.name] = $(this).val() ;
		        }
		    });
		    return param ;
		}
		
	</script>


</body>

</html>
